<template>
  <div class="row">
    <div class="col-12 pt-3">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">编号</th>
            <th scope="col">科目</th>
            <th scope="col">成绩</th>
            <th scope="col">考试时间</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="item.id">
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ item.subject }}</td>
            <td>{{ item.score }}</td>
            <!-- 3. 插值显示 -->
            <td>{{ format(item.time) }}</td>
            <td>
              <button
                type="button"
                class="btn btn-link"
                @click="$emit('delByIndex', index)"
              >
                删除
              </button>
            </td>
          </tr>

          <tr class="bg-light">
            <th scope="row">统计</th>
            <td colspan="2">总分：0</td>
            <td colspan="2">平均分：0</td>
          </tr>
        </tbody>
        <tfoot style="display: none">
          <tr>
            <td class="text-center" colspan="5">暂无数据</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script>
/*
  学习目标：日期格式化
*/

// JS模块包， 哪里用哪里倒入
//  1. 子组件内，导入moment
import moment from "moment";
export default {
  props: {
    list: Array,
  },
  methods: {
    //  2. 定义函数，转换时间格式
    format(time) {
      return moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style></style>
